<template>
    <div class="mask" :class="{hidden: hidden}">
        <div class="dialog-box">
            <div class="dialog">
                <p class="title">{{title}}</p>
                <div class="row">
                    <div class="cell-6">
                        <button class="btn outline" @click="positive">{{yes}}</button>
                    </div>
                    <div class="cell-6">
                        <button class="btn outline" @click="negative">{{no}}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    // import '@/assets/css/load.css';
    export default {
        name: 'Dialog',
        data() {
            return {
                hidden: true,
                resolve: '',
                reject: '',
                promise: '',
                title: this.$t('Are you sure?'),
                yes: this.$t('yes'),
                no: this.$t('no'),
            }
        },
        methods: {
            positive() {
                this.resolve('positive');
                this.hidden = true;
            },
            negative() {
                // this.resolve('negative');
                this.hidden = true;
            },
            handleConfirm() {
                this.hidden = false;
                this.promise = new Promise((resolve, reject) => {
                    this.resolve = resolve;
                    this.reject = reject;
                });
                return this.promise;
            }
        }
    }
</script>
<style>

    .dialog .title {
        line-height: 2rem;
    }

    .dialog {
        border: .4rem solid #D0D0D0;
        min-width: 10rem;
    }

    .dialog .btn {
        font-weight: 100;
        line-height: 1;
        height: 1.2rem;
        padding: 0 .6rem;
        margin: 0 auto;
    }
</style>